<template>
    <div class="comment">
        <div class="com-box">
          <div class="cm-head">
            <div class="cm-l">
              <div class="cm-l-img">
                <img src="../../../../static/img/uhead.jpg" alt="">
<!--                <img src="../../../../static/img/vip111.png" alt="">-->
              </div>
              <div class="cm-name"><span>心愿</span><span>1小时前 </span></div>
            </div>
            <div class="cm-r">
              <p><img src="../../../../static/img/tz2.png" alt=""><span>12</span></p>
              <p><img src="../../../../static/img/tz1.png" alt=""><span>223</span></p>
            </div>
          </div>
          <div class="txt">嗯，大家一起加油！</div>
          <div class="cm-hf">
              <div class="cm-hf-box">

                <span>精神小伙</span><p class="cm-lz">楼主</p><span>：嗯，加油！谢谢</span>
              </div>
              <div class="cm-hf-box">
                <span>心愿回复了&nbsp;&nbsp;精神小伙</span><p class="cm-lz">楼主</p><span>：不用谢，努力就会有收获的。</span>
              </div>
          </div>
        </div>
        <div class="com-box">
          <div class="cm-head">
            <div class="cm-l">
              <div class="cm-l-img">
                <img src="../../../../static/img/uhead.jpg" alt="">
<!--                <img src="../../../../static/img/vip111.png" alt="">-->
              </div>
              <div class="cm-name"><span>心愿</span><span>1小时前 </span></div>
            </div>
            <div class="cm-r">
              <p><img src="../../../../static/img/tz2.png" alt=""><span>12</span></p>
              <p><img src="../../../../static/img/tz1.png" alt=""><span>223</span></p>
            </div>
          </div>
          <div class="txt">嗯，大家一起加油！</div>
          <div class="cm-hf">
              <div class="cm-hf-box">
                梦梦宝贝<p class="cm-lz">楼主</p>：嗯，加油！谢谢
              </div>
              <div class="cm-hf-box">
                心愿回复了&nbsp;&nbsp;梦梦宝贝<p class="cm-lz">楼主</p>：不用谢，努力就会有收获的。
              </div>
          </div>
        </div>
        <div class="com-ft">
            <div class="inp">
              <input type="text" placeholder="发表评论"> <img src="../../../../static/img/xxixixixiix.png" alt="">
            </div>
          <div class="com-ft-btn">发表</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "comment"
    }
</script>

<style scoped>
  .comment {
    width: 100%;
    background-color: #ffffff;
    padding-top: .2rem;
  }
  .com-box {
    margin-bottom: .3rem;
  }
  .cm-head {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .2rem;
  }
  .cm-l {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .cm-l-img{
    width: .32rem;
    height: .32rem;
    position: relative;
    margin-right: .1rem;
  }
  .cm-l-img>img:nth-child(1) {
    width: 100%;
    height: 100%;
    border-radius: .04rem;
  }
  .cm-l-img>img:nth-child(2) {
    width: .15rem;
    height: .15rem;
    position: absolute;
    right: -.05rem;
    bottom: -.03rem;
  }
  .cm-name {
    height: .32rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .cm-name>span:nth-child(1) {
    font-size:.15rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #333333;
    line-height: .15rem;
  }
  .cm-name>span:nth-child(2) {
    font-size:.1rem;
    line-height: .1rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #999999;
  }
  .cm-r>p>img {
    width: .11rem;
    height: .1rem;
    margin-right: .03rem;
  }
  .cm-r>p>span {
    font-size:.1rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #999999;
  }
  .cm-r {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .cm-r>p {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-left: .2rem;
  }

  .txt {
    font-size:.15rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:.18rem;
    color: #333333;
    margin-bottom: .1rem;
  }

  .cm-hf {
    background:rgba(243,243,243,1);
    border-radius:.04rem;
    margin-left: .4rem;
    padding:.1rem .15rem;
  }
  .cm-hf-box {
    font-size:.14rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #666666;
    margin-bottom: .05rem;
  }
  .cm-hf-box>p {
    display: inline-block;
    border:.01rem solid rgba(255,0,0,1);
    border-radius:.02rem;
    color: #FF0000;
    text-align: center;
    font-size:.08rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    line-height: .15rem;
    padding: 0 .03rem;
    background-color: #ffffff;
    margin: 0 .03rem;
  }

  .com-ft {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 88;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .inp {
    width:2.63rem;
    height:.32rem;
    background:rgba(246,246,246,1);
    border-radius:.04rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 .1rem;
    position: relative;
  }
  .inp>img {
    width: .2rem;
    height: .2rem;
  }
  .inp>input {
    outline: none;
    border: none;
    background-color: rgba(246,246,246,1);
  }
  .com-ft-btn {
    width:.5rem;
    height:.25rem;
    background:rgba(255,139,60,1);
    border-radius:.04rem;
    color: #ffffff;
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    text-align: center;
    line-height: .25rem;
  }
</style>
